<template>
 <span >
  <span class="buttonCont" @click="showDialog">
    <slot></slot>
  </span>
  <el-dialog append-to="body" draggable v-model="myOptions.modalVisible" :title="myOptions.title" width="800"
             align-center destroy-on-close>
    <div>
      <h1 :data="data">内容</h1>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click.stop="hideDialog()">关闭</el-button>
        <el-button type="primary" @click="onSubmit()">确认</el-button>
      </div>
    </template>
  </el-dialog>
</span>
</template>

<script>
export default
    {
  props: {
    data: {
      type: Object,
      default: function () {
        return {};
      },
    },
  },
  data() {
    return {
      formData: {},
      myOptions: {
        modalVisible: true,
        title: "详情",
      },
    };
  },
  methods: {
    getData() {
      klcs
        .ajaxTest({ url: "aaaaa", params: { bbb: 123323 } })
        .then(function (response) {
          console.log(response);
        });
    },
    showDialog() {
      this.myOptions.modalVisible = true;
      this.getData();
    },
    hideDialog(e) {
      this.myOptions.modalVisible = false;
      },
    onSubmit() {
      console.log("提交操作")
    },
  },
}
</script>
<!-- 这里或采用lang="less" -->
<style lang="scss"></style>
